<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" :size="formSize"
    status-icon>
    <el-row class="custom-row" :gutter="20">

      <el-col :span="10">
        <el-form-item label="单据编号" prop="salesForecastCode">
          <el-input class="elFormItem100PX" v-model="ruleForm.salesForecastCode" disabled />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row class="custom-row" :gutter="20">
      <el-col :span="5">
        <el-form-item label="项目名称" prop="projectName">
          <el-input class="elFormItem100PX" v-model="ruleForm.projectName" />
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="项目类型" prop="projectType">
          <el-select v-model="ruleForm.projectType" class="elFormItem100PX" placeholder="项目类型">
            <el-option label="WMS" value="WMS" />
            <el-option label="MES" value="MES" />
            <el-option label="AGV" value="AGV" />
            <el-option label="SCADA" value="SCADA" />
            <el-option label="SAP" value="SAP" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="订单状态" prop="state">
          <el-select v-model="ruleForm.state" class="elFormItem100PX" placeholder="项目类型">
            <el-option label="跟踪中" :value=1 />
            <el-option label="丢单" :value=2 />
            <el-option label="客户取消" :value=3 />
            <el-option label="已签订" :value=4 />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    

    <el-row class="custom-row" :gutter="20">
      <el-col :span="5">
        <el-form-item label="客户名称" prop="custName">
          <el-select v-model="ruleForm.custName" filterable @click="on_getCustName" :filter-method="getCustName"
            class="elFormItem100PX">
            <el-option v-for="item in optionsCustName" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="客户联系方式" prop="custPhone">
          <el-input class="elFormItem100PX" v-model="ruleForm.custPhone" />
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="客户地址" prop="custAddress">
          <el-input class="elFormItem100PX" v-model="ruleForm.custAddress" autosize type="textarea"
            placeholder="Please input" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="custom-row" :gutter="20">
      <el-col :span="5">
        <el-form-item label="预计金额（万元）" prop="estAmount">
          <el-input class="elFormItem100PX" v-model="ruleForm.estAmount" type="number" />
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="是否需要方案" prop="isScheme">
          <el-switch v-model="ruleForm.isScheme" size="small" inline-prompt active-text="是" inactive-text="否" />
        </el-form-item>
      </el-col>

    </el-row>

    <el-row class="custom-row" :gutter="20">
      <el-col :span="5">
        <el-form-item label="预计启动时间" prop="estimatedStartTime">
          <el-date-picker
          v-model="ruleForm.estimatedStartTime"
          type="date"
          placeholder="Pick a date"
        />
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="预计结束时间" prop="estimatedEndTime">
          <el-date-picker
          v-model="ruleForm.estimatedEndTime"
          type="date"
          placeholder="Pick a date"
        />
        </el-form-item>
      </el-col>


      <el-col :span="5">
        <el-form-item label="要求方案提交日期" prop="schemeTime">
          <el-date-picker
          v-model="ruleForm.schemeTime"
          type="date"
          placeholder="Pick a date"
        />
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="方案实际提交时间" prop="schemeActualTimes">
          <el-date-picker
          v-model="ruleForm.schemeActualTimes"
          type="date"
          placeholder="Pick a date"
        />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row class="custom-row" :gutter="20">

      <el-col :span="5">
        <el-form-item label="跟踪状态" prop="trackingState">
          <el-input class="elFormItem100PX" v-model="ruleForm.trackingState" autosize type="textarea"
            placeholder="Please input" />
        </el-form-item>
      </el-col>

      <el-col :span="5">
        <el-form-item label="备注" prop="remark">
          <el-input class="elFormItem100PX" v-model="ruleForm.remark" autosize type="textarea"
            placeholder="Please input" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- <el-col :span="6">
<el-form-item label="" prop="count">
      <el-select-v2
        v-model="ruleForm.count"
        placeholder="Activity count"
        :options="options"
      />
    </el-form-item>
    <el-col :span="6">
<el-form-item label="Activity time" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker
            v-model="ruleForm.date1"
            type="date"
            label="Pick a date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col class="text-center" :span="2">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker
            v-model="ruleForm.date2"
            label="Pick a time"
            placeholder="Pick a time"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-col :span="6">
<el-form-item label="Instant delivery" prop="delivery">
      <el-switch v-model="ruleForm.delivery" />
    </el-form-item>
    <el-col :span="6">
<el-form-item label="Activity type" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-col :span="6">
<el-form-item label="Resources" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="Sponsorship" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-col :span="6">
<el-form-item label="Activity form" prop="desc">
      <el-input class="elFormItem100PX" v-model="ruleForm.desc" type="textarea" />
    </el-form-item> -->
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        提交
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">清除</el-button>
    </el-form-item>
  </el-form>
</template>
<style>
.elFormItem100PX {
  min-width: 200px;
}
.custom-row {
  margin-bottom: 20px; /* 或者使用 padding-bottom */
}
</style>
<script lang="ts" setup>
import { reactive, ref, onMounted  } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import api from '/@/api/sy/apiERP.js';
import { v } from 'vxe-table';
interface RuleForm {
  salesForecastCode: string | null
  projectType: string | null
  projectName: string | null
  custName: string | null
  custPhone: string | null
  custAddress: string | null
  isScheme: boolean | null
  estAmount: number | null
  estimatedStartTime: Date | null
  estimatedEndTime: Date |null,
  schemeTime: Date | null
  schemeActualTimes: Date | null
  trackingState: string | null
  state:number | null
  remark: string | null
}
interface ListItem {
  value: string
  label: string
}
const options2 = ref<ListItem[]>([])
function on_optCustName2(query: string) {
  if (query == 'a') {
    options2.value = [{
      value: 'Option1',
      label: 'Option1',
    },]
  } else {
    options2.value = [
      {
        value: 'Option2',
        label: 'Option2',
      },]
  }
}


const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  salesForecastCode: 'c',
  projectType: null,
  projectName: null,
  custName: null,
  custPhone: null,
  custAddress: null,
  isScheme: false,
  estAmount: null,
  estimatedStartTime: null,
  estimatedEndTime:null,
  schemeTime:null,
  schemeActualTimes: null,
  trackingState: '',
  state:1,
  remark: '',
})


var optionsCustName = ref<ListItem[]>()
const rules = reactive({
  salesForecastCode: [
    { required: true, message: '编号不可为空', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  projectType: [
    {
      // type: 'array',
      required: true,
      message: '请至少选一个类型',
      trigger: 'change',
    },
  ],
  state: [
    {
      // type: 'number',
      required: true,
      message: '请至少选一个类型',
      trigger: 'change',
    },
  ],
  projectName: [
    {
      required: true,
      message: '项目名称不可为空',
      trigger: 'change',
    },
  ],
  custName: [
    {
      required: true,
      message: '客户名称',
      trigger: 'change',
    },
  ],
  custPhone: [
    {
      required: true,
      message: '客户联系方式',
      trigger: 'change',
    },
  ],
  // estimatedStartTime: [
  //   {
  //     type: 'date',
  //     required: true,
  //     message: '请填写正确的时间',
  //     trigger: 'change',
  //   },
  // ],
  estAmount: [
    {
      required: true,
      message: '金额需要填写',
      trigger: 'blur'
    },
  ],
})
var re_optCustName = [
  {
    value: 'Option5',
    label: 'Option5',
  },
]
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      addSales(formEl)
    } else {
    }
  })
}
interface Option {
  label: string;
  value: string;
}
function on_getCustName() {
  getCustName('')
}
function getCustName(query: any) {
  api.post('public/sales/salesForecastADD_getCustName', query, {
    headers: {
      'Content-Type': 'text/plain', // 设置请求体的类型为纯文本
    },
  }).then((response: any) => {
    optionsCustName.value = []
    for (const a of response.data.data) {
      optionsCustName.value?.push({ label: a, value: a })
    }


    var ab = optionsCustName.value.some(option => option.label === query)
    // console.log((ab));
    if (!ab && query.length>0) {
      optionsCustName.value?.push({ label: (query + '(该客户不存在，可强制选择)'), value: query })
    }

    // 处理服务器返回的响应
  })
    .catch((error: any) => {

      //console.log(error);
      // 处理错误
    })
    .finally(() => {
      // console.log('必须执行')
    })

}



function on_optCustName(query: any, option: any) {
  // 自定义过滤逻辑，这里示例为选项的 label 字段的模糊匹配
  optionsCustName.value = [{ label: 'a', value: '1' }]
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  salesADD_getsalesForecastCode()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))



function addSales(formEl: FormInstance | undefined) {
  var param = ruleForm
  
  const jsonData = JSON.stringify(ruleForm);
  api.post('public/sales/salesForecastADD', param).then((response: any) => {
    // 处理服务器返回的响应
    if(response.data.code==200){
      alert('新增成功')
      resetForm(formEl)
    }
  })
    .catch((error: any) => {
      //console.log(error);
      // 处理错误
    })
    .finally(() => {
      console.log('必须执行')
    })

    ;
}

function salesADD_getsalesForecastCode(){
  
  api.post('public/sales/salesForecastADD_getSalesCode').then((response: any) => {
    // 处理服务器返回的响应
    ruleForm.salesForecastCode=response.data.data
  })
    .catch((error: any) => {
      //console.log(error);
      // 处理错误
    })
    .finally(() => {
    })

    ;
}
onMounted(() => {
   
  salesADD_getsalesForecastCode()
  // 在这里写逻辑
});
</script>
